<template>
	<view class="container" :class="getEffect" v-if="visible && popData">
		<view class="effect">
			<view class="effect-header">
				<view v-if="popData.templateFlag === 1" class="background"></view>
				<view class="front">
					<view class="center" :style="{ backgroundImage: 'url(' + popData.popImgUrl + ')' }"></view>
				</view>
			</view>
			<view class="effect-body">
				<view class="text" :style="{ backgroundImage: 'url(' + popData.textImgUrl + ')' }"></view>
				<button class="navigator-button" v-if="popData.popScreenUrl" @click="execute(popData.popScreenUrl)">去参与</button>
			</view>
			<view class="effect-footer"><view class="close" @click="close"></view></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			type: { '1': 'popup', '2': 'rotate' },
			index: 0
		};
	},
	props: {
		visible: { type: Boolean, default: false },
		popData: {
			type: [Array, Object]
		}
	},
	computed: {
		getEffect() {
			if (this.popData) {
				return this.type[this.popData.effectType] || 'popup';
			}
			return 'popup';
		}
	},
	methods: {
		close() {
			this.$emit('update:visible', false);
		},
		execute(path) {
			this.$emit('toPage', path, 'special');
		}
	}
};
</script>

<style lang="less" scoped>
.container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #00000080;
	z-index: 1000;

	.effect {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: 50rpx;
		transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		.effect-header {
			display: flex;
			position: relative;
			.background {
				position: absolute;
				width: 200rpx;
				height: 200rpx;
				background: url(//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/hyperesources/back-sun.png) center center no-repeat;
				background-size: 100%;
				z-index: 0;
				left: 50%;
				top: 50%;
				margin-left: -100rpx;
				margin-top: -100rpx;
				transform: scale(0);
				animation: effect-show-sunshine 3s 1 1s;
				animation-fill-mode: forwards;
			}
			.front {
				position: relative;
				z-index: 1;
				display: flex;
				margin: auto;
				.center {
					width: 335rpx;
					height: 348rpx;
					background-size: 100%;
					position: relative;
					// filter: drop-shadow(rgb(0, 0, 0) 0px 0px 20px);
					background-position: center;
					background-repeat: no-repeat;
					// background-size: initial;
					margin: 0 -50rpx;
				}
			}
		}
		.effect-body {
			margin-top: 10rpx;
			transform: scale(0);
			animation: show-text 1.2s 1 2s;
			animation-fill-mode: forwards;
			.text {
				height: 80rpx;
				line-height: 80rpx;
				color: #fdbb51;
				font-size: 32rpx;
				background-size: auto 100%;
				background-position: center;
				background-repeat: no-repeat;
				width: 750rpx;
			}
			.navigator-button {
				background: transparent;
				border: solid 2rpx #fdbb51;
				color: #fdbb51;
				margin-top: 40rpx;
				width: 160rpx;
				font-size: 24rpx;
			}
		}
		.effect-footer {
			margin-top: 60rpx;
			text-align: center;
			.close {
				display: inline-block;
				width: 90rpx;
				height: 90rpx;
				background: url(//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/hyperesources/close.png) center center no-repeat;
				background-size: 100%;
			}
		}
	}
	&.popup {
		.effect {
			.effect-header {
				animation: effect-show 0.8s 1;
			}
			.effect-body {
				animation: show-text 0.8s 1 1s;
				animation-fill-mode: forwards;
			}
		}
	}
	&.rotate {
		.effect {
			.effect-header {
				.front {
					.left,
					.right {
						transform: scale(0);
						animation: effect-scale 2s 1 1s;
						animation-fill-mode: forwards;
					}
					.center {
						transform: rotate(0deg) scale(0);
						animation: effect-rotate-scale 2s 1;
						animation-fill-mode: forwards;
					}
				}
			}
		}
	}
}

@keyframes show-text {
	0% {
		transform: scale(0);
	}
	100% {
		transform: scale(1);
	}
}
//弹出
@keyframes effect-show {
	0% {
		transform: scale(0);
	}
	20% {
		transform: scale(1.5);
	}
	40% {
		transform: scale(0.5);
	}
	60% {
		transform: scale(1.15);
	}
	80% {
		transform: scale(0.85);
	}
	100% {
		transform: scale(1);
	}
}
@keyframes effect-show-sunshine {
	0% {
		transform: scale(0);
	}
	20% {
		transform: scale(4) rotate(0deg);
	}
	80% {
		transform: scale(4) rotate(120deg);
	}
	100% {
		transform: scale(0) rotate(120deg);
	}
}
@keyframes effect-show-pass {
	0% {
		left: 110rpx;
		top: 0;
		opacity: 1;
	}
	60% {
		left: 260rpx;
		top: 20rpx;
		opacity: 0;
	}
	61% {
		left: 110rpx;
		top: 0;
		opacity: 1;
	}
	100% {
		left: 260rpx;
		top: 20rpx;
		opacity: 0;
	}
}

//旋转
@keyframes effect-rotate-scale {
	0% {
		transform: rotate(0deg) scale(0);
	}
	100% {
		transform: rotate(1800deg) scale(1);
	}
}
@keyframes effect-scale {
	0% {
		transform: scale(0);
	}
	100% {
		transform: scale(1);
	}
}
</style>
